<template>
	<view class="pay-page">
		<!-- 头部 - 仅在APP环境显示 -->
		<!-- #ifdef APP-PLUS -->
		<view class="header">
			<view class="header-content">
				<view class="back-btn" @click="$jump.navigateBack()">
					<u-icon name="arrow-left" color="#333333" size="42"></u-icon>
				</view>
				<view class="title">订单支付</view>
				<view class="placeholder"></view>
			</view>
		</view>
		<!-- #endif -->

		<!-- 订单信息 -->
		<view class="order-info">
			<view class="order-header">
				<u-icon name="checkmark-circle-fill" color="#5C65FF" size="40"></u-icon>
				<text class="order-title">订单提交成功</text>
			</view>
			<view class="order-details">
				<view class="detail-item">
					<text class="label">订单编号</text>
					<text class="value">{{orderInfo.order_no}}</text>
				</view>
				<view class="detail-item">
					<text class="label">支付金额</text>
					<text class="value amount">￥{{orderInfo.total_amount}}</text>
				</view>
				<view class="detail-item">
					<text class="label">服务项目</text>
					<text class="value">{{orderInfo.service_name}}</text>
				</view>
			</view>
		</view>

		<!-- 支付方式 -->
		<view class="payment-methods">
			<view class="section-title">选择支付方式</view>
			
			<!-- 动态支付方式列表 -->
			<view 
				class="payment-item" 
				v-for="method in paymentMethods" 
				:key="method.type"
				:class="{active: selectedPayType === method.type}" 
				@click="selectPayType(method.type)"
			>
				<view class="payment-left">
					<image :src="method.icon" class="pay-icon"></image>
					<view class="pay-info">
						<text class="pay-name">{{method.name}}</text>
						<text class="pay-desc">{{method.desc}}</text>
					</view>
				</view>
				<view class="payment-right">
					<u-icon name="checkmark-circle-fill" :color="selectedPayType === method.type ? '#5C65FF' : '#CCCCCC'" size="40"></u-icon>
				</view>
			</view>
		</view>

		<!-- 支付按钮 -->
		<view class="pay-footer">
			<button class="pay-btn" @click="handlePay" :disabled="!selectedPayType">
				立即支付 ￥{{orderInfo.total_amount}}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: {
					order_no: '',
					total_amount: '0.00',
					service_name: '',
					order_id: ''
				},
				selectedPayType: 'wechat', // 默认选择微信支付
				isApp: false, // 是否为APP环境
				isWechat: false, // 是否为微信小程序环境
				paymentMethods: [] // 可用支付方式列表
			}
		},
		onLoad(options) {
			// 获取订单信息
			if (options.orderInfo) {
				this.orderInfo = JSON.parse(decodeURIComponent(options.orderInfo));
			}
			
			// 判断当前环境并初始化支付方式
			this.initPaymentMethods();
		},
		methods: {
			// 初始化支付方式
			initPaymentMethods() {
				// 检测平台
				// #ifdef APP-PLUS
				this.isApp = true;
				this.isWechat = false;
				// #endif
				
				// #ifdef MP-WEIXIN
				this.isApp = false;
				this.isWechat = true;
				// #endif
				
				// 设置支付方式
				this.paymentMethods = [
					{
						type: 'wechat',
						name: '微信支付',
						desc: '推荐使用微信支付',
						icon: 'https://www.shuyunpt.com/app/image/pay/wechat-pay.png'
					}
				];
				
				// APP环境添加支付宝支付
				if (this.isApp) {
					this.paymentMethods.push({
						type: 'alipay',
						name: '支付宝支付',
						desc: '使用支付宝快捷支付',
						icon: 'https://www.shuyunpt.com/app/image/pay/alipay.png'
					});
				}
				
				// 设置默认支付方式
				this.selectedPayType = 'wechat';
				
				console.log('支付方式初始化:', {
					isApp: this.isApp,
					isWechat: this.isWechat,
					methods: this.paymentMethods,
					defaultType: this.selectedPayType
				});
			},
			
			// 选择支付方式
			selectPayType(type) {
				this.selectedPayType = type;
			},
			
			// 处理支付
			async handlePay() {
				if (!this.selectedPayType) {
					this.$hint.desc('请选择支付方式');
					return;
				}
				
				try {
					this.$hint.showLoading('正在发起支付...');
					
					// 根据支付方式处理
					if (this.selectedPayType === 'wechat') {
						await this.handleWechatPay();
					} else if (this.selectedPayType === 'alipay') {
						await this.handleAlipayPay();
					}
					
				} catch (error) {
					this.$hint.hideLoading();
					console.error('支付失败:', error);
					this.$hint.desc('支付失败，请重试');
				}
			},
			

			
			// 处理微信支付
			async handleWechatPay() {
				// #ifdef APP-PLUS
				// APP环境微信支付
				try {
					// 调用APP微信支付接口
					const res = await this.$service({
						url: '/api/member.pay/payOrder',
						data: {
							order_no: this.orderInfo.order_no,
							pay_type: 'wx_app'
						}
					});
					
					console.log('APP微信支付接口响应:', res);
					
					if (res.code !== 1) {
						throw new Error(res.msg || '支付接口调用失败');
					}
					
					this.$hint.hideLoading();
					
					// 发起微信支付
					uni.requestPayment({
						provider: 'wxpay',
						orderInfo: res.data.orderInfo,
						success: (payRes) => {
							console.log('微信支付成功:', payRes);
							this.paySuccess();
						},
						fail: (err) => {
							console.error('微信支付失败:', err);
							this.$hint.desc('支付失败，请重试');
						}
					});
					
				} catch (error) {
					this.$hint.hideLoading();
					console.error('APP微信支付接口调用失败:', error);
					this.$hint.desc('支付失败，请重试');
				}
				// #endif
				
				// #ifdef MP-WEIXIN
				// 小程序环境微信支付
				try {
					// 调用微信小程序支付接口
					const res = await this.$service({
						url: '/api/member.pay/payOrder',
						data: {
							order_no: this.orderInfo.order_no,
							pay_type: 'wx_min'
						}
					});
					
					console.log('微信支付接口响应:', res);
					
					if (res.code !== 1) {
						throw new Error(res.msg || '支付接口调用失败');
					}
					
					this.$hint.hideLoading();
					
					// 发起微信支付
					uni.requestPayment({
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: (payRes) => {
							console.log('微信支付成功:', payRes);
							this.paySuccess();
						},
						fail: (err) => {
							console.error('微信支付失败:', err);
							this.$hint.desc('支付失败，请重试');
						}
					});
					
				} catch (error) {
					this.$hint.hideLoading();
					console.error('微信支付接口调用失败:', error);
					this.$hint.desc('支付失败，请重试');
				}
				// #endif
			},
			
			// 处理支付宝支付
			async handleAlipayPay() {
				// #ifdef APP-PLUS
				// APP环境支付宝支付
				try {
					// 调用APP支付宝支付接口
					const res = await this.$service({
						url: '/api/member.pay/payOrder',
						data: {
							order_no: this.orderInfo.order_no,
							pay_type: 'alipay_app'
						}
					});
					
					console.log('APP支付宝支付接口响应:', res);
					
					if (res.code !== 1) {
						throw new Error(res.msg || '支付接口调用失败');
					}
					
					this.$hint.hideLoading();
					
					// 发起支付宝支付
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: res.data.orderInfo,
						success: (payRes) => {
							console.log('支付宝支付成功:', payRes);
							this.paySuccess();
						},
						fail: (err) => {
							console.error('支付宝支付失败:', err);
							this.$hint.desc('支付失败，请重试');
						}
					});
					
				} catch (error) {
					this.$hint.hideLoading();
					console.error('APP支付宝支付接口调用失败:', error);
					this.$hint.desc('支付失败，请重试');
				}
				// #endif
			},
			
			// 支付成功处理
			paySuccess() {
				this.$hint.desc('支付成功');
				
				// 延迟跳转到订单详情页
				setTimeout(() => {
					uni.redirectTo({
						url: `/pages/order/detail?order_id=${this.orderInfo.order_id}`
					});
				}, 2000);
			}
		}
	}
</script>

<style scoped>
	/* 全局样式 */
	.pay-page {
		min-height: 100vh;
		background: #f5f5f5;
		padding-bottom: 120rpx;
		/* 兼容不同平台 */
		box-sizing: border-box;
	}
	
	/* 头部样式 */
	.header {
		background: #ffffff;
		padding: 20rpx 0;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		/* 兼容APP状态栏 */
		/* #ifdef APP-PLUS */
		padding-top: calc(20rpx + var(--status-bar-height));
		/* #endif */
	}
	
	.header-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
	}
	
	.back-btn {
		padding: 10rpx;
		/* 兼容不同平台的点击区域 */
		min-width: 60rpx;
		min-height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		/* 兼容不同平台的字体 */
		/* #ifdef APP-PLUS */
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
		/* #endif */
	}
	
	.placeholder {
		width: 60rpx;
	}
	
	/* 订单信息样式 */
	.order-info {
		background: #ffffff;
		margin: 30rpx 40rpx;
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		/* 兼容不同平台的圆角 */
		/* #ifdef APP-PLUS */
		border-radius: 20rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		border-radius: 20rpx;
		/* #endif */
	}
	
	.order-header {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
	}
	
	.order-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 20rpx;
	}
	
	.order-details {
		border-top: 1rpx solid #f0f0f0;
		padding-top: 30rpx;
	}
	
	.detail-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25rpx;
		/* 兼容不同平台的布局 */
		flex-wrap: wrap;
	}
	
	.detail-item:last-child {
		margin-bottom: 0;
	}
	
	.label {
		font-size: 28rpx;
		color: #666666;
		/* 兼容不同平台的字体大小 */
		/* #ifdef APP-PLUS */
		font-size: 28rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		font-size: 28rpx;
		/* #endif */
	}
	
	.value {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
		/* 兼容长文本换行 */
		word-break: break-all;
		text-align: right;
		flex: 1;
		margin-left: 20rpx;
	}
	
	.amount {
		font-size: 36rpx;
		color: #F85639;
		font-weight: bold;
	}
	
	/* 支付方式样式 */
	.payment-methods {
		background: #ffffff;
		margin: 30rpx 40rpx;
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 30rpx;
	}
	
	.payment-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border: 2rpx solid #f0f0f0;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		transition: all 0.3s ease;
		/* 兼容不同平台的点击效果 */
		/* #ifdef APP-PLUS */
		cursor: pointer;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		position: relative;
		/* #endif */
	}
	
	.payment-item:last-child {
		margin-bottom: 0;
	}
	
	.payment-item.active {
		border-color: #5C65FF;
		background: rgba(92, 101, 255, 0.05);
	}
	
	/* 兼容不同平台的点击状态 */
	/* #ifdef APP-PLUS */
	.payment-item:active {
		transform: scale(0.98);
		opacity: 0.8;
	}
	/* #endif */
	
	/* #ifdef MP-WEIXIN */
	.payment-item::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.05);
		opacity: 0;
		transition: opacity 0.2s;
		border-radius: 16rpx;
	}
	
	.payment-item:active::after {
		opacity: 1;
	}
	/* #endif */
	
	.payment-left {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.pay-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 25rpx;
		/* 兼容不同平台的图片显示 */
		border-radius: 8rpx;
		/* #ifdef APP-PLUS */
		object-fit: cover;
		/* #endif */
	}
	
	.pay-info {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	
	.pay-name {
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 8rpx;
	}
	
	.pay-desc {
		font-size: 24rpx;
		color: #999999;
	}
	
	.payment-right {
		padding: 10rpx;
		/* 兼容不同平台的图标显示 */
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* 支付按钮样式 */
	.pay-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #ffffff;
		padding: 30rpx 40rpx;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
		/* 兼容不同平台的安全区域 */
		/* #ifdef APP-PLUS */
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		/* #endif */
	}
	
	.pay-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #5C65FF 0%, #4A52E8 100%);
		color: #ffffff;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 44rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 20rpx rgba(92, 101, 255, 0.3);
		/* 兼容不同平台的按钮样式 */
		/* #ifdef APP-PLUS */
		cursor: pointer;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		position: relative;
		/* #endif */
	}
	
	.pay-btn::after {
		border: none;
	}
	
	/* 兼容不同平台的按钮点击效果 */
	/* #ifdef APP-PLUS */
	.pay-btn:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 10rpx rgba(92, 101, 255, 0.2);
	}
	/* #endif */
	
	/* #ifdef MP-WEIXIN */
	.pay-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.1);
		opacity: 0;
		transition: opacity 0.2s;
		border-radius: 44rpx;
	}
	
	.pay-btn:active::before {
		opacity: 1;
	}
	/* #endif */
	
	.pay-btn:disabled {
		background: #cccccc;
		box-shadow: none;
		/* 兼容不同平台的禁用状态 */
		/* #ifdef APP-PLUS */
		cursor: not-allowed;
		/* #endif */
	}
	
	/* 兼容不同平台的通用样式 */
	/* #ifdef APP-PLUS */
	/* APP平台特定样式 */
	.pay-page {
		/* 防止内容被状态栏遮挡 */
		padding-top: var(--status-bar-height);
	}
	/* #endif */
	
	/* #ifdef MP-WEIXIN */
	/* 微信小程序特定样式 */
	.pay-page {
		/* 微信小程序页面背景 */
		background: #f5f5f5;
		/* 微信小程序没有头部，添加适当的上边距 */
		padding-top: 20rpx;
	}
	/* #endif */
	
	/* 微信小程序按钮重置 */
	button {
		background: none;
		border: none;
		padding: 0;
		margin: 0;
		line-height: 1;
	}
	
	button::after {
		border: none;
	}
	/* #endif */
	
	/* 响应式适配 */
	@media screen and (max-width: 750rpx) {
		.order-info,
		.payment-methods {
			margin: 20rpx 20rpx;
			padding: 30rpx;
		}
		
		.pay-footer {
			padding: 20rpx 20rpx;
		}
	}
</style> 